<template>
  <button @click="showModal = true">显示弹窗</button>

  <Teleport to="body">
    <button @click="showModal = true">Open Modal</button>

    <div v-if="showModal"
         class="modal">
      <p>Hello from the modal!</p>
      <button @click="showModal = false">Close</button>
    </div>
  </Teleport>

</template>

<script setup lang="ts">
  import { ref } from 'vue'

  let showModal = ref(false)
</script>

<style  scoped>
  .modal {
    position: fixed;
    z-index: 999;
    top: 20%;
    left: 50%;
    width: 300px;
    margin-left: -150px;
  }
</style>